<!DOCTYPE html><html>
<head>
    <title>Form Layout</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
    <link href="/jscss/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="container">
        <form>
            <div class="form-group">
                <label>单行表单</label>
                <div>
                    <label class="formi"><input type="checkbox"/><i></i>爱迪生</label>
                    <label class="formi"><input type="checkbox" checked="checked"/><i></i>特斯拉</label>
                    <label class="formi"><input type="checkbox" disabled/><i></i>收银台</label>
                    <label><input type="checkbox"/>默认效果</label>
                    <label><input type="checkbox"/>南飞雁</label>
                </div>
            </div>
            <div class="form-group">
                <label>单行表单</label>
                <div>
                    <input type="text"/>
                </div>
            </div>
            <div class="form-group inline">
                <label>同行自适应</label>
                <div>
                    <input type="text" placeholder="http://"/>
                </div>
            </div>
            <div class="form-group inline">
                <label>同行自适应</label>
                <div>
                    <input type="text"/>
                </div>
            </div>
            <div class="form-group inline">
                <label>同行自适应</label>
                <div>
                    <input type="text"/>
                </div>
            </div>
            <div class="form-group inline">
                <label>同行自适应</label>
                <div>
                    <input type="text"/>
                </div>
            </div>
            <div class="form-group inline">
                <label>同行自适应</label>
                <div>
                    <input type="text"/>
                </div>
            </div>
            <div class="form-group inline">
                <label>同行自适应</label>
                <div>
                    <input type="text"/>
                </div>
            </div>
            <div class="clearfix"></div>
            <div class="form-group">
                <label>自定义长度</label>
                <div>
                    <input type="text" placeholder="ciy.cn" style="width:10em;">
                </div>
            </div>
            <div class="form-group">
                <label style="width:5em;">短标题</label>
                <div>
                    <input type="text" placeholder="label标签加style=width:5em;">
                </div>
            </div>
            <div class="form-group">
                <label style="width:10em;">九个字显示超长标题</label>
                <div>
                    <input type="text" placeholder="label标签加style=width:10em;">
                </div>
            </div>
            <div class="form-group">
                <div style='text-align:center;'>
                <button type="button" class="btn">居中按钮</button>
                </div>
            </div>
        </form>
        <form class="line char4 padding">
            <div class="form-group">
                <label>表格效果</label>
                <div>内容文字</div>
            </div>
            <div class="form-group">
                <label>单行表单</label>
                <div>
                    <input type="text"/>
                </div>
            </div>
            <div class="row">
	            <div class="col-xs-6">
		            <div class="form-group">
		                <label>同行1</label>
		                <div>
		                    <input type="text" style="width:100%;"/>
		                </div>
		            </div>
	            </div>
	            <div class="col-xs-6">
		            <div class="form-group">
		                <label>同行2</label>
		                <div>
		                    <input type="text"/>
		                </div>
		            </div>
	            </div>
            </div>
            <div class="row">
	            <div class="col-xs-4">
		            <div class="form-group">
		                <label>同行3</label>
		                <div>
		                    <input type="text"/>
		                </div>
		            </div>
	            </div>
	            <div class="col-xs-4">
		            <div class="form-group">
		                <label>同行4</label>
		                <div>
		                    <input type="text"/>
		                </div>
		            </div>
	            </div>
	            <div class="col-xs-4">
		            <div class="form-group">
		                <label>同行5</label>
		                <div>
		                    <input type="text"/>
		                </div>
		            </div>
	            </div>
            </div>
            <div class="form-group">
                <div style='text-align:center;'>
                <button type="button" class="btn">提交按钮</button>
                </div>
            </div>
        </form>
    </div>
</body></html>